<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>库存管理</el-breadcrumb-item>
      <el-breadcrumb-item>库存列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <el-table :data="stockList" stripe style="width: 100%">
          <el-table-column type="index">
        </el-table-column>
        <el-table-column prop="foodName" label="食物" width="180">
        </el-table-column>
        <el-table-column prop="foodNum" label="数量"></el-table-column>
        <!-- <el-table-column prop="date" label="保存时间">
            <template slot-scope="scope">{{
            scope.row.date | dateFormat
          }}</template>
        </el-table-column> -->
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-input class="input" v-model="scope.row.foodNum" clearable @blur="editFoodNum(scope.row.foodID,scope.row.foodNum)"></el-input>
            </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      stockList: []
    }
  },
  created() {
    this.getStockList()
  },
  methods: {
    //获取库存列表
    async getStockList() {
      //todo发请求
      //模拟数据
      const { data: res} = await this.$http.get('food')
      this.stockList = res.data
      
    },
    //修改库存数量
    async editFoodNum(foodId,foodNum) {
      const {data: res} = await this.$http.put(`food/${foodId}`,{
        foodNum
      })
       this.$message({
          message: '修改成功',
          type: 'success'
        });
    }
  }
}
</script>
<style lang="less" scoped>
.input {
  width: 35% !important;
}

</style>
